<!--
用于生成统一的padding和面包屑
@author pan
@createDate 2022/02 2022/2/28 08:57
-->
<script setup lang="ts" name="ContentTag">
import { useRoute } from 'vue-router'
import { useLoginUserStore } from 'store/modules/LoginUserStore'
import { computed } from 'vue'
import { SystemMenuAncestorsType, SystemMenuType } from '@/system'

withDefaults(
  defineProps<{
    /**
     * 是否禁用面包屑. 默认:false
     */
    disableBreadcrumb?: boolean
  }>(),
  { disableBreadcrumb: false }
)
const $route = useRoute()
const loginUserStore = useLoginUserStore()
const menuMapComputed = computed(() => loginUserStore.GETTER_MENUS_MAP)
const breadcrumbData = computed<SystemMenuAncestorsType>(() => {
  // 根据路由名获取菜单数据
  const menuItem = menuMapComputed.value.get($route.name as string)
  if (menuItem) {
    return menuItem
  } else {
    //@ts-ignore
    return { menuItem: null, ancestors: [] } as SystemMenuAncestorsType
  }
})
function buildMenuName(menuItem: SystemMenuType) {
  return menuItem.name
}
</script>

<template>
  <div class="contentTag">
    <div v-if="!disableBreadcrumb" class="breadcrumbPanel">
      <h2 v-if="breadcrumbData.menuItem">
        {{ buildMenuName(breadcrumbData.menuItem) }}
        <div class="inner">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item
              v-for="(item, idx) in breadcrumbData.ancestors"
              :key="`${item.menuItem.code}-${idx}`"
              :to="{ path: item.menuItem.url }"
            >
              {{ buildMenuName(item.menuItem) }}
            </el-breadcrumb-item>
            <el-breadcrumb-item v-if="breadcrumbData.menuItem">
              {{ buildMenuName(breadcrumbData.menuItem) }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </h2>
    </div>
    <div class="mainContent">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.contentTag {
}
.mainContent {
  padding: 20px;
}
.breadcrumbPanel {
  background-color: $white;
  padding: 20px;
  h2 {
    margin: 0;
  }
  .inner {
    display: inline-block;
    margin-left: 15px;
    ::v-deep(.el-breadcrumb) {
      font-style: italic;
      font-size: 12px;
    }
  }
}
</style>
